<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>操作当当购物车页面</title>
		<link type="text/css" rel="stylesheet" href="../21/css/cartStyle.css" />
		<script>
			function closewin() {
				close();
			}

			function collection() {
				alert("收藏成功");
			}

			function del(str) {
				if (confirm("是否确认删除"))
					self(str);
				alert("删除成功");
			}

			function self(str) {
				let me_box = document.querySelector(str);
				if (me_box) {
					// me_box.remove();
					me_box.parentNode.removeChild(me_box);
				}
			}
			//得到减号
			var minus = document.getElementsByName("minus");
			//得到加号对象以数组形式有下标
			var plus = document.getElementsByName("plus");
			//得到数量值
			var amount = document.getElementsByName("amount");
			//获取金额
			var price = document.getElementsByName("price");

			//一开始载入页面时显示的总金额
			function jie() {
				let chall = document.querySelectorAll(".ch");
				var s = 0;
				for (let i = 0; i < chall.length-1; i++) {
					if(chall[i].checked){
						s += Math.round(price[i].value * amount[i].value * 100) / 100;
					}
				}
				document.getElementById("totalPrice").lastElementChild.innerHTML = s;
				
			}


			//当点击加号时
			function plusa(index) {
				//得到商品数量 数量之加一
				amount[index].value = parseInt(amount[index].value) + 1;
				//重新计算金额数
				document.getElementById("price" + index).innerHTML = "¥" + Math.round(price[index].value * amount[index].value *
					100) / 100;

				jie();
			}
			//当点击减号时
			function minusa(index) {
				if (amount[index].value == 0) {
					alert("不能再减了");
					return;
				}
				amount[index].value = parseInt(amount[index].value) - 1;
				document.getElementById("price" + index).innerHTML = "¥" + Math.round(price[index].value * amount[index].value *
					100) / 100;

				jie();
			}
			plus[0].onclick = function() {
				plusa(0);
			}
			minus[0].onclick = function() {
				minusa(0);
			}
			//对第二个加号进行操作
			plus[1].onclick = function() {
				plusa(1);
			}
			minus[1].onclick = function() {
				minusa(1);
			}

			function checkboxa() {
				let ch = document.querySelector("input[name=quanxuan]");
				let chall = document.querySelectorAll(".ch");
				for (let i = 0; i < chall.length; i++) {
					chall[i].checked = ch.checked;
				}
				
				// if (ch.checked) {
				// 	for (let i = 0; i < chall.length; i++) {
				// 		chall[i].checked = ch.checked;
				// 	}
				// } else {
				// 	for (let i = 0; i < chall.length; i++) {
				// 		chall[i].checked = false;
				// 	}

				// }
			}
		</script>
	</head>
	<body>

		<div class="content">
			<div class="logo">
				<img src="images/dd_logo.jpg"><span onclick="closewin()">关闭</span>
			</div>
			<div class="cartList" id="cartList">
				<ul>
					<li>商品图片</li>
					<li>商品信息</li>
					<li>单价</li>
					<li>数量</li>
					<li>总价</li>
					<li>操作</li>
				</ul>
				<div class="meBox">
					<!-- 多选框 -->
					<input type="checkbox" class="ch" />
					<ul>

						<li><img src="images/dog.jpg"></li>
						<li>我和狗狗活下来了</li>
						<li>¥<input type="text" name="price" value="21.90"></li>
						<li><input type="button" name="minus" value="-" onclick="minusa(0)"><input type="text"
								name="amount" value="1"><input type="button" name="plus" value="+" onclick="plusa(0)">
						</li>
						<li id="price0">¥21.90</li>
						<li>
							<p onclick="collection();">移入收藏</p>
							<p onclick="del('.meBox')">删除</p>
						</li>
					</ul>
				</div>
				<div class="meBox">
					<input type="checkbox" class="ch" />
					<ul>
						<li><img src="images/mai.jpg"></li>
						<li>灰霾来了怎么办</li>
						<li>¥<input type="text" name="price" value="24.00"></li>
						<li><input type="button" name="minus" value="-" onclick="minusa(1);"><input type="text"
								name="amount" value="1"><input type="button" name="plus" value="+" onclick="plusa(1)">
						</li>
						<li id="price1">¥24.00</li>
						<li>
							<p onclick="collection();">移入收藏</p>
							<p onclick="del('.meBox')">删除</p>
						</li>
					</ul>
				</div>

				<ol>
					<li id="totalPrice">商品总计：<span></span></li>
					<li><span onclick="jie()">结 算</span></li>
				</ol>
				<label for="">全选</label>
				<input type="checkbox" name="quanxuan" class="ch" onclick="checkboxa()" />

			</div>
		</div>
	</body>
</html>